Skip to content

html-01 基础知识

一、注释方法

html 表示超文本标记语言,结构 用来注释

css 表示层叠样式表,样式 用</* */>注释

js 表示脚本语言,行为动作 单行用//注释,多行用</* */>

二、介绍

html语言,用标记标签来描述网页的。

标签成对出现的,单标签的叫空标签或自闭合标签。

自闭合标签:<br><hr><input><img><meta><link>

三、常用浏览器及内核

谷歌 ---webkit blink

火狐 ---gecko

safari ---webkit

opera ---开始webkit 后来blink

ie ---trident

五、标签

h1-h6 六级标签,数字越大文字越小。p代表段落

h1每个页面最好只用一次,h2-h6可以随便用。

br 强制换行,是自闭合标签(空标签)。

六、页面的基本结构

  1. <!DOCTYPE html> 声明文档,告诉浏览器的解析器用哪种规范来解析文档
html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> // 文档使用的编码格式
    <title>Document</title>
</head>
<body>
</body>
</html>
  1. meta标签里面包含了页面的元信息(关键字,描述),页面的编码格式(字符编码,字符集),
  2. 常用的编码格式有:gb2312(国际2312),gbk(国标扩),UTF-8。
  3. body标签里面是页面的主体

七、标签分类

  1. 块标签

    单独占用一行,可以设置所有的样式

    常用的块标签有:h1-h6,p,div,ul,li,ol,dl,dt,dd

    块标签里面可以包含其他的块标签,内联标签,内联块都行

    但是p标签里面不能包含块标签

  2. 内联标签(行内标签) 在同一行显示,显示不完换行,不可以设置所有样式(比如宽度高度);

    常用的内联标签有:strong,b,em,i,span,a

    内联标签的margin值和padding值只能只能设置左右,不能设置上下。

    内联标签里面不可以包含块标签,但是a标签可以放。

    内联元素出现空格如何解决:

  3. 删除回车。(不提倡,不直观)。

  4. 给父元素设置font-size:0;给子元素设置font-size恢复子元素的字体。

  5. 内联块标签(行内块标签) 在同一行显示,显示不完换行,可以设置所有属性,可以设置宽高。

常用的内联块标签有:img

给img标签的父元素设置font-size:0;可以解决图片间隙

八、CSS

  1. 在head标签里面写style标签
  2. 语法:选择器
html
<style>
div {
    color: red;
}
</style>
  1. 属性名和属性值中间用冒号隔开。

九、div和span标签

  1. div标签 :没有任何语义,可以把他看做一个盒子,一个块,或者一部分,块标签。
  2. span标签:没有任何语义,内联标签。

十、无序列表。

  1. ul标签和li标签配合使用,ul标签只能放li标签,li标签可以放其他标签。
  2. 每个li前面都有个默认的实心圆,想改变默认的小圆点可以在li标签里面设置 type="circle" 空心圆(了解)

type="square" 方块

想取消默认的点:需要设置CSS属性:list-style:none;

ul和li都是块标签。

十一、有序列表

ol标签和li标签配合使用,每个li前面都有默认的序号,改变需要在ol标签设置

type="a" //小写a顺序排序

type="A" //大写A顺序排序

type="I" //罗马数字顺序排列

type="i" //罗马数字顺序小写排列

取消默认设置CSS属性:list-style:none;

倒序显示:reversed,从3开始倒序,start="3";

ol和li都是块标签

li的父元素必须是ul或ol。

十二、定义列表

dl,dt,dd配合使用,dl是dt和dd的父元素,dt,dd是兄弟元素

dl的直接子元素只能是dt,dd,dt和dd里面可以包含其他元素

dd是对dt的解释和说明

dl,dt,dd都是块元素

十三、文字加粗,偏斜

  1. strong,b都可以让文字加粗,其中strong标签更具有强调的意义。
  2. em,i都可以让文字倾斜,其中em更具有强调的意义。

十四、图片标签

1.img标签,自闭合标签(空标签); src="图片路劲";

alt="图片的描述文字"; 当图片加载不出来的时候会显示这段文字。

title="图片的标题";鼠标放上去显示这段文字。(所有的标签都可以有title属性)

srcset='图片地址 2x' 2x和3x根据密度区分图片,800w根据宽度适应图片;也可以写dpi,css可以写背景图时用image-set属性名;

width="500",height="500";

十五、路径

  1. 绝对路径;(完整路径) (1)从盘符开始的

    (2)从具体链接http开始的

  2. 相对路径;(文件夹下的路径) (1)在同一个目录下直接写文件名字(包含扩展名),或者写./文件名字;

(2)当被链接的文件在当前文件的下一级文件夹里,写文件夹的名字/被链接的文件名字。

(3)当被链接的文件在当前文件的上一级,用../上一级链接的文件

十六、语义化

语义化是什么:用合理的html标签和特有的属性来格式化文档的内容。

语义化的有什么好处:

  1. 在没有css的情况下,页面还能呈现很好的页面结构。
  2. 提高代码的可读性,便于后期维护。
  3. 提高用户的体验,比如:给img标签设置title alt。
  4. 对seo有帮助。(seo是搜索引擎优化)。

面试题

● 简述<!doctype>的作用?

● 常见的浏览器及其内核?

● 常见的块级标签和行内标签分别有哪些?

● b和strong(i和em)标签的区别?

● 谈谈对语义化的理解?

Released under the MIT License.